<template>
  <div>
    <div>地图案例(包围盒、正投影)</div>
    <div ref="webgl"></div>
  </div>
</template>
<script lang="ts" setup>
  import * as THREE from 'three';
  import { FontLoader, OrbitControls, TextGeometry } from 'three/addons';
  import { onMounted, ref } from 'vue';

  const webgl: any = ref(null);
  let scene: any = null;
  let camera: any = null;
  let render: any = null;
  let controls: OrbitControls;
  const data: any = [
    [106.37442, 28.525742],
    [106.403369, 28.569901],
    [106.477282, 28.530474],
    [106.504999, 28.544669],
    [106.466811, 28.586193],
    [106.49268, 28.591448],
    [106.502535, 28.661313],
    [106.528405, 28.677591],
    [106.492064, 28.742153],
    [106.461883, 28.761041],
    [106.45326, 28.817162],
    [106.474202, 28.832891],
    [106.561666, 28.756319],
    [106.56105, 28.719062],
    [106.587535, 28.691767],
    [106.6171, 28.691242],
    [106.617716, 28.66709],
    [106.651593, 28.649235],
    [106.618332, 28.645033],
    [106.63681, 28.622972],
    [106.606629, 28.593024],
    [106.615252, 28.549401],
    [106.567825, 28.523638],
    [106.564745, 28.485247],
    [106.632499, 28.503655],
    [106.697788, 28.47683],
    [106.708259, 28.450524],
    [106.747063, 28.467361],
    [106.726121, 28.51838],
    [106.73844, 28.554657],
    [106.77786, 28.563068],
    [106.756918, 28.607211],
    [106.784636, 28.626649],
    [106.807425, 28.589346],
    [106.830831, 28.623497],
    [106.866556, 28.624548],
    [106.889345, 28.695966],
    [106.86594, 28.690192],
    [106.824056, 28.756319],
    [106.845614, 28.780975],
    [106.872099, 28.777304],
    [106.923222, 28.809821],
    [106.951555, 28.766812],
    [106.988512, 28.776254],
    [106.983584, 28.851239],
    [107.019308, 28.861722],
    [107.016229, 28.882685],
    [107.14188, 28.887925],
    [107.206554, 28.868535],
    [107.194851, 28.838134],
    [107.227496, 28.836037],
    [107.210866, 28.817686],
    [107.219489, 28.772582],
    [107.24659, 28.76209],
    [107.261373, 28.792514],
    [107.327894, 28.810869],
    [107.339597, 28.845997],
    [107.383945, 28.848618],
    [107.41351, 28.911502],
    [107.441227, 28.943977],
    [107.412894, 28.960211],
    [107.396879, 28.993718],
    [107.364235, 29.00942],
    [107.395647, 29.041341],
    [107.369778, 29.091558],
    [107.412278, 29.094696],
    [107.427676, 29.128682],
    [107.408582, 29.138091],
    [107.401807, 29.184603],
    [107.441227, 29.203934],
    [107.486806, 29.174153],
    [107.570574, 29.218037],
    [107.589052, 29.150113],
    [107.605683, 29.164747],
    [107.659885, 29.162656],
    [107.700537, 29.141228],
    [107.749197, 29.199754],
    [107.810791, 29.139137],
    [107.784921, 29.048143],
    [107.823725, 29.034016],
    [107.810175, 28.984295],
    [107.867457, 28.960211],
    [107.882855, 29.00628],
    [107.908725, 29.007327],
    [107.925971, 29.032446],
    [108.026369, 29.039772],
    [108.070717, 29.086328],
    [108.150173, 29.053375],
    [108.193289, 29.072207],
    [108.256115, 29.040295],
    [108.277673, 29.091558],
    [108.306622, 29.079006],
    [108.297999, 29.045527],
    [108.319556, 28.961258],
    [108.345426, 28.943453],
    [108.357745, 28.893165],
    [108.346658, 28.859625],
    [108.352817, 28.815589],
    [108.386078, 28.803003],
    [108.385462, 28.772058],
    [108.347274, 28.736381],
    [108.332491, 28.679166],
    [108.439049, 28.634003],
    [108.501258, 28.626649],
    [108.50249, 28.63768],
    [108.575787, 28.659738],
    [108.636149, 28.621396],
    [108.604736, 28.590922],
    [108.610896, 28.539412],
    [108.573939, 28.531],
    [108.586874, 28.463678],
    [108.609664, 28.43579],
    [108.609048, 28.407368],
    [108.576403, 28.38631],
    [108.580099, 28.343128],
    [108.611512, 28.324691],
    [108.667562, 28.334173],
    [108.656475, 28.359981],
    [108.697127, 28.401051],
    [108.688504, 28.422106],
    [108.640461, 28.456838],
    [108.657091, 28.47683],
    [108.700207, 28.48209],
    [108.709446, 28.501026],
    [108.746402, 28.45105],
    [108.780279, 28.42579],
    [108.759953, 28.389995],
    [108.783359, 28.380518],
    [108.761801, 28.304143],
    [108.726692, 28.282011],
    [108.738395, 28.228241],
    [108.772888, 28.212949],
    [108.821547, 28.245113],
    [108.855424, 28.199764],
    [108.89546, 28.219804],
    [108.923793, 28.217167],
    [108.929952, 28.19027],
    [109.005713, 28.162837],
    [109.026655, 28.220331],
    [109.086401, 28.184467],
    [109.101799, 28.202401],
    [109.081473, 28.247749],
    [109.117198, 28.277795],
    [109.152306, 28.349975],
    [109.153538, 28.417369],
    [109.191726, 28.471043],
    [109.23361, 28.474726],
    [109.274262, 28.494714],
    [109.273646, 28.53836],
    [109.319842, 28.579886],
    [109.306907, 28.62087],
    [109.252089, 28.606685],
    [109.235458, 28.61982],
    [109.201581, 28.597753],
    [109.192958, 28.636104],
    [109.271183, 28.671816],
    [109.252704, 28.691767],
    [109.294588, 28.722211],
    [109.2989, 28.7474],
    [109.241002, 28.776779],
    [109.246545, 28.80143],
    [109.235458, 28.882161],
    [109.261328, 28.952356],
    [109.292741, 28.987436],
    [109.294588, 29.015177],
    [109.319842, 29.042388],
    [109.312451, 29.066453],
    [109.240386, 29.086328],
    [109.232378, 29.119271],
    [109.215748, 29.145409],
    [109.162777, 29.180946],
    [109.139372, 29.168927],
    [109.110422, 29.21647],
    [109.141835, 29.270256],
    [109.106727, 29.288526],
    [109.11227, 29.361053],
    [109.060531, 29.403292],
    [109.034662, 29.360531],
    [108.999553, 29.36366],
    [108.983539, 29.332883],
    [108.919481, 29.3261],
    [108.934264, 29.399643],
    [108.927488, 29.435612],
    [108.884373, 29.440824],
    [108.866511, 29.470527],
    [108.888684, 29.502305],
    [108.878213, 29.539279],
    [108.913322, 29.574679],
    [108.901003, 29.604863],
    [108.870206, 29.596537],
    [108.888068, 29.628795],
    [108.844337, 29.658443],
    [108.781511, 29.635558],
    [108.797525, 29.660003],
    [108.786438, 29.691721],
    [108.752562, 29.649082],
    [108.690968, 29.689642],
    [108.676801, 29.749412],
    [108.680497, 29.800319],
    [108.658939, 29.854833],
    [108.601041, 29.863656],
    [108.556077, 29.818493],
    [108.52528, 29.770713],
    [108.548686, 29.749412],
    [108.504954, 29.728626],
    [108.504338, 29.707836],
    [108.460606, 29.741098],
    [108.437201, 29.741098],
    [108.442744, 29.778505],
    [108.422418, 29.772791],
    [108.424266, 29.815897],
    [108.371295, 29.841337],
    [108.433505, 29.880262],
    [108.467998, 29.864175],
    [108.516041, 29.885451],
    [108.517889, 29.9394],
    [108.536367, 29.983472],
    [108.532055, 30.051873],
    [108.513577, 30.057571],
    [108.546222, 30.104178],
    [108.56778, 30.157491],
    [108.551766, 30.1637],
    [108.581947, 30.255759],
    [108.54499, 30.269716],
    [108.524048, 30.309506],
    [108.501258, 30.314673],
    [108.460606, 30.35961],
    [108.431041, 30.354446],
    [108.402092, 30.376649],
    [108.430425, 30.416397],
    [108.411331, 30.438586],
    [108.42673, 30.492233],
    [108.472925, 30.487076],
    [108.512961, 30.501515],
    [108.556077, 30.487592],
    [108.56778, 30.468508],
    [108.6497, 30.53915],
    [108.642925, 30.578831],
    [108.688504, 30.58759],
    [108.698975, 30.54482],
    [108.743939, 30.494812],
    [108.789518, 30.513374],
    [108.808612, 30.491202],
    [108.838793, 30.503062],
    [108.893612, 30.565434],
    [108.971836, 30.627766],
    [109.006329, 30.626736],
    [109.042669, 30.655571],
    [109.071002, 30.640125],
    [109.111654, 30.646303],
    [109.106111, 30.61077],
    [109.105495, 30.585529],
    [109.102415, 30.580377],
    [109.101183, 30.579346],
    [109.106111, 30.570587],
    [109.103647, 30.565949],
    [109.143683, 30.521108],
    [109.191726, 30.545851],
    [109.191726, 30.545851],
    [109.245313, 30.580892],
    [109.299516, 30.630341],
    [109.314298, 30.599953],
    [109.36111, 30.551004],
    [109.337088, 30.521623],
    [109.35495, 30.487076],
    [109.418392, 30.559766],
    [109.435638, 30.595832],
    [109.535421, 30.664837],
    [109.543428, 30.63961],
    [109.574225, 30.646818],
    [109.590855, 30.69366],
    [109.625348, 30.702923],
    [109.661072, 30.738936],
    [109.656761, 30.760538],
    [109.701724, 30.783677],
    [109.780564, 30.848437],
    [109.828608, 30.864364],
    [109.894513, 30.899803],
    [109.943788, 30.878746],
    [110.008462, 30.883369],
    [110.019549, 30.829425],
    [110.048498, 30.800642],
    [110.082375, 30.799614],
    [110.151976, 30.911613],
    [110.153824, 30.953708],
    [110.172918, 30.978853],
    [110.140889, 30.987062],
    [110.140273, 31.030661],
    [110.120563, 31.0322],
    [110.119947, 31.088592],
    [110.147048, 31.116776],
    [110.180309, 31.121899],
    [110.200019, 31.158779],
    [110.180309, 31.179774],
    [110.155671, 31.279564],
    [110.161831, 31.314338],
    [110.118715, 31.409899],
    [110.054042, 31.410921],
    [110.036795, 31.436966],
    [109.98752, 31.474744],
    [109.94502, 31.47066],
    [109.969658, 31.508935],
    [109.894513, 31.519139],
    [109.837847, 31.555354],
    [109.727594, 31.548214],
    [109.745456, 31.598182],
    [109.76455, 31.602769],
    [109.737449, 31.628761],
    [109.731289, 31.700582],
    [109.683246, 31.719929],
    [109.622268, 31.711783],
    [109.585928, 31.726546],
    [109.549587, 31.73011],
    [109.502776, 31.716365],
    [109.446109, 31.722983],
    [109.381436, 31.705165],
    [109.281654, 31.716874],
    [109.282885, 31.743343],
    [109.253936, 31.759628],
    [109.279806, 31.776418],
    [109.27611, 31.79931],
    [109.195422, 31.817618],
    [109.191111, 31.85575],
    [109.123357, 31.892851],
    [109.085785, 31.929428],
    [108.986619, 31.980205],
    [108.902235, 31.984774],
    [108.837561, 32.039072],
    [108.78767, 32.04871],
    [108.75133, 32.076098],
    [108.734084, 32.106519],
    [108.676801, 32.10297],
    [108.585026, 32.17189],
    [108.543758, 32.177969],
    [108.509882, 32.201266],
    [108.480317, 32.182527],
    [108.399013, 32.194176],
    [108.370063, 32.172397],
    [108.379918, 32.154158],
    [108.379918, 32.154158],
    [108.379303, 32.153652],
    [108.379303, 32.153652],
    [108.399628, 32.147065],
    [108.452599, 32.090296],
    [108.42981, 32.061391],
    [108.372527, 32.077112],
    [108.344194, 32.067477],
    [108.362056, 32.035521],
    [108.329411, 32.020299],
    [108.370063, 31.988835],
    [108.351585, 31.971575],
    [108.307238, 31.997463],
    [108.259194, 31.967006],
    [108.343578, 31.860834],
    [108.386078, 31.854226],
    [108.391005, 31.829822],
    [108.429194, 31.809482],
    [108.455063, 31.814059],
    [108.462454, 31.780488],
    [108.535135, 31.757592],
    [108.50557, 31.734182],
    [108.514809, 31.693963],
    [108.546838, 31.665442],
    [108.519121, 31.665952],
    [108.468614, 31.636404],
    [108.442744, 31.633856],
    [108.390389, 31.591555],
    [108.386078, 31.544134],
    [108.339266, 31.539033],
    [108.344194, 31.512506],
    [108.254883, 31.49873],
    [108.233941, 31.506894],
    [108.191441, 31.492096],
    [108.193289, 31.467598],
    [108.224086, 31.464024],
    [108.216079, 31.41041],
    [108.153869, 31.371073],
    [108.185898, 31.336831],
    [108.095354, 31.268311],
    [108.038688, 31.252964],
    [108.031297, 31.217144],
    [108.07626, 31.231985],
    [108.089811, 31.204859],
    [108.025753, 31.116263],
    [108.009123, 31.109602],
    [108.026985, 31.061938],
    [108.060246, 31.052197],
    [108.00358, 31.025533],
    [107.983254, 30.983983],
    [107.942602, 30.989114],
    [107.948145, 30.918802],
    [107.994956, 30.908533],
    [107.956152, 30.882855],
    [107.851443, 30.792931],
    [107.788001, 30.81966],
    [107.763979, 30.817091],
    [107.760899, 30.862823],
    [107.739957, 30.884396],
    [107.693146, 30.875665],
    [107.645103, 30.821202],
    [107.57735, 30.847924],
    [107.515756, 30.854603],
    [107.483111, 30.838675],
    [107.498509, 30.809381],
    [107.454162, 30.771851],
    [107.454162, 30.771851],
    [107.424597, 30.74048],
    [107.458473, 30.704981],
    [107.477567, 30.664837],
    [107.516987, 30.644759],
    [107.485575, 30.598408],
    [107.427676, 30.547397],
    [107.443075, 30.53348],
    [107.408582, 30.521623],
    [107.368546, 30.468508],
    [107.338981, 30.386459],
    [107.288474, 30.337402],
    [107.257677, 30.267131],
    [107.221337, 30.213878],
    [107.103076, 30.090198],
    [107.080286, 30.094341],
    [107.084598, 30.063786],
    [107.058113, 30.043066],
    [107.055649, 30.040476],
    [107.054417, 30.040994],
    [107.053801, 30.043584],
    [107.02054, 30.036849],
    [106.981736, 30.08502],
    [106.976193, 30.083467],
    [106.94478, 30.037367],
    [106.913367, 30.025451],
    [106.862244, 30.033223],
    [106.83699, 30.049801],
    [106.825904, 30.03115],
    [106.825904, 30.03115],
    [106.785252, 30.01716],
    [106.732281, 30.027005],
    [106.724274, 30.058607],
    [106.699636, 30.074145],
    [106.700252, 30.111944],
    [106.672535, 30.122297],
    [106.677462, 30.156974],
    [106.631883, 30.186464],
    [106.611557, 30.235596],
    [106.612173, 30.235596],
    [106.611557, 30.235596],
    [106.612173, 30.235596],
    [106.612173, 30.235596],
    [106.612789, 30.235596],
    [106.612789, 30.235596],
    [106.642354, 30.246454],
    [106.611557, 30.292455],
    [106.560434, 30.31519],
    [106.545035, 30.296589],
    [106.49884, 30.295556],
    [106.43971, 30.308473],
    [106.428623, 30.254725],
    [106.401521, 30.242318],
    [106.349167, 30.24542],
    [106.334384, 30.225772],
    [106.306667, 30.238182],
    [106.296196, 30.205603],
    [106.264167, 30.20974],
    [106.260471, 30.19681],
    [106.232754, 30.185947],
    [106.180399, 30.233011],
    [106.168696, 30.303823],
    [106.132356, 30.323972],
    [106.132972, 30.30279],
    [106.07261, 30.333786],
    [106.031958, 30.373551],
    [105.943263, 30.372002],
    [105.900763, 30.405042],
    [105.84656, 30.410203],
    [105.825618, 30.436006],
    [105.792357, 30.427234],
    [105.760329, 30.384393],
    [105.754785, 30.342567],
    [105.714749, 30.322939],
    [105.720292, 30.252657],
    [105.720292, 30.252657],
    [105.670401, 30.254208],
    [105.624822, 30.275918],
    [105.619894, 30.234045],
    [105.662394, 30.210258],
    [105.642684, 30.186464],
    [105.56138, 30.183878],
    [105.550909, 30.179222],
    [105.536127, 30.152834],
    [105.596489, 30.159043],
    [105.574315, 30.130579],
    [105.580474, 30.129544],
    [105.582938, 30.127474],
    [105.582938, 30.12385],
    [105.642068, 30.101072],
    [105.638988, 30.076216],
    [105.676561, 30.06793],
    [105.687032, 30.038922],
    [105.719677, 30.042548],
    [105.753553, 30.018196],
    [105.723372, 29.975177],
    [105.730763, 29.95755],
    [105.70243, 29.924879],
    [105.717213, 29.893753],
    [105.738771, 29.891159],
    [105.707974, 29.840818],
    [105.610655, 29.837184],
    [105.582938, 29.819013],
    [105.574931, 29.744216],
    [105.529351, 29.707836],
    [105.481924, 29.718232],
    [105.476996, 29.674564],
    [105.419714, 29.688082],
    [105.38091, 29.628275],
    [105.347649, 29.621512],
    [105.332867, 29.592374],
    [105.296526, 29.571035],
    [105.305149, 29.53199],
    [105.337794, 29.459064],
    [105.334099, 29.441345],
    [105.387069, 29.455416],
    [105.387069, 29.455416],
    [105.399388, 29.43874],
    [105.372903, 29.421018],
    [105.426489, 29.419454],
    [105.441888, 29.400686],
    [105.418482, 29.352185],
    [105.42033, 29.31149],
    [105.465294, 29.322969],
    [105.459134, 29.288526],
    [105.513337, 29.283306],
    [105.521344, 29.264513],
    [105.557684, 29.278608],
    [105.631597, 29.280174],
    [105.647612, 29.253027],
    [105.695039, 29.287482],
    [105.712285, 29.219082],
    [105.703662, 29.176766],
    [105.728916, 29.134432],
    [105.752321, 29.129727],
    [105.728916, 29.1062],
    [105.757865, 29.069068],
    [105.74185, 29.039249],
    [105.766488, 29.013607],
    [105.762176, 28.9911],
    [105.801596, 28.958116],
    [105.797285, 28.936121],
    [105.830546, 28.944501],
    [105.852719, 28.927217],
    [105.910002, 28.920407],
    [105.969132, 28.965971],
    [106.001161, 28.973824],
    [106.040581, 28.955498],
    [106.049204, 28.906263],
    [106.070762, 28.919884],
    [106.101559, 28.898928],
    [106.14837, 28.901548],
    [106.173008, 28.920407],
    [106.206885, 28.904691],
    [106.264783, 28.845997],
    [106.245689, 28.817686],
    [106.267863, 28.779402],
    [106.274022, 28.739004],
    [106.305435, 28.704365],
    [106.304203, 28.64976],
    [106.346703, 28.583565],
    [106.33192, 28.55308],
    [106.37442, 28.525742],
  ];
  onMounted(() => {
    init();
  });
  function init() {
    scene = new THREE.Scene();
    // 正投影相机
    const width = window.innerWidth; //canvas画布宽度
    const height = window.innerHeight; //canvas画布高度
    const k = width / height; //canvas画布宽高比
    const s = 50; //控制left, right, top, bottom范围大小
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
    camera.position.set(300, 300, 300);
    camera.lookAt(scene.position);
    render = new THREE.WebGLRenderer();
    // 背景颜色
    render.setClearColor('#f1f2f6');
    render.setSize(width, height);
    webgl.value.appendChild(render.domElement);
    controls = new OrbitControls(camera, render.domElement);
    const amLight = new THREE.AmbientLight(0xffffff);
    scene.add(amLight);
    const helper = new THREE.AxesHelper(200);
    scene.add(helper);
    const pointLight = new THREE.PointLight(0xffffff);
    pointLight.position.set(100, 100, 100);
    scene.add(pointLight);
    const pointLightHelper = new THREE.PointLightHelper(pointLight);
    scene.add(pointLightHelper);
    const material = new THREE.MeshBasicMaterial({
      color: '#2b88d8',
      side: 2,
    });
    const pointsArr: any = []; // 一组二维向量表示一个多边形轮廓坐标
    data.forEach(function (e: any) {
      // data坐标数据转化为Vector2构成的顶点数组
      const v2 = new THREE.Vector2(e[0], e[1]);
      pointsArr.push(v2);
    });
    const shape = new THREE.Shape(pointsArr);
    const geometry = new THREE.ShapeGeometry(shape);
    geometry.name = 'chongqin';
    const materialMesh = new THREE.Mesh(geometry, material);
    scene.add(materialMesh);

    // 包围盒计算模型对象的大小和位置
    const box3 = new THREE.Box3();
    box3.expandByObject(materialMesh); // 计算模型包围盒
    // const size = new THREE.Vector3();
    // box3.getSize(size); // 计算包围盒尺寸
    // console.log('模型包围盒尺寸',size);
    const center = new THREE.Vector3();
    box3.getCenter(center); // 计算包围盒中心坐标
    // console.log('模型中心坐标', center);
    geometry.translate(-center.x, -center.y, 0);
    geometry.scale(5, 5, 5);
    geometry.rotateY(45);
    // 模型边线设置
    const edges = new THREE.EdgesGeometry(geometry);
    const edgesMaterial = new THREE.LineBasicMaterial({
      color: 0xff0000,
    });
    const line = new THREE.LineSegments(edges, edgesMaterial);
    scene.add(line);
    // camera.lookAt(center.x, center.y, 0);
    // controls.target.set(center.x, center.y, 0); //与lookAt参数保持一致
    const loader = new FontLoader();

    loader.load('../../../../public/font/gentilis_regular.typeface.json', function (font) {
      console.log('font', font);

      const geometryText = new TextGeometry('Hello three.js!', {
        font: font,
        size: 1,
        height: 1,
      });
      const textMaterial = new THREE.LineBasicMaterial({
        color: 0xff0000,
      });
      let textMesh = new THREE.Mesh(geometryText, textMaterial);
      scene.add(textMesh);
    });

    renderFun();
  }
  // let angle = 0; //用于圆周运动计算的角度值
  // const R = 100; //相机圆周运动的半径
  function renderFun() {
    // 渲染循环
    // angle += 0.01;
    // 相机y坐标不变，在XOZ平面上做圆周运动
    // camera.position.x = R * Math.cos(angle);
    // camera.position.z = R * Math.sin(angle);
    controls.update(); //update()函数内会执行camera.lookAt(controls.target)
    render.render(scene, camera);
    requestAnimationFrame(renderFun);
  }
</script>
<style lang=""></style>
